---
title: With Next.js
description: Use Next.js Functions to proxy search requests to Elasticsearch
---

# Proxy With Next.js Functions

For production use, we dont recommend calling Elasticsearch directly from the browser. Thankfully, Searchkit provides a way to proxy the search request through to a node API. This is really easy to setup.

Below this creates a Next.js server function which transforms the instantsearch requests sent from the browser into Elasticsearch queries and transforms the responses into instantsearch results.

## Get Started with Next.js

First, within your Next.js project, install the dependencies

```bash
npm install @searchkit/api
```

## Create the API file

Next, create a file called `pages/api/search.ts` with the following content

```ts filename="pages/api/search.ts"
import Client from "@searchkit/api";
import { NextApiRequest, NextApiResponse } from "next";

const client = Client({
  connection: {
    host: "http://localhost:9200",
    // if you are authenticating with api key
    // https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-api-key
    // apiKey: '###'
    // if you are authenticating with username/password
    // https://www.searchkit.co/docs/guides/setup-elasticsearch#connecting-with-usernamepassword
    // auth: {
    //   username: "elastic",
    //   password: "changeme"
    // },
  },
  search_settings: {
    highlight_attributes: ["name"],
    snippet_attributes: ["description"],
    search_attributes: [{ field: "name", weight: 3 }, "description", "categories"],
    result_attributes: ["name", "description", "price", "categories"],
    facet_attributes: [{
      field: "categories.keyword",
      type: "string",
      attribute: "categories",
    }, {
      field: "price",
      type: "numeric",
      attribute: "price",
    }],
  }
});

// example API handler for Next.js
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const results = await client.handleRequest(req.body);
  res.send(results);
}
```

and then on the frontend, update the instantsearch client to use the API url.

Remove the `searchkit` import and configuration from the frontend as its no longer needed. Elasticsearch is now being called from the backend.

```ts filename="pages/index.tsx"
const searchClient = instantsearch({
  // the API endpoint you created above
  url: "/api/search",
});

```

## Code Sandbox Example

<iframe src="https://codesandbox.io/embed/github/searchkit/searchkit/tree/main/examples/with-ui-nextjs-react?fontsize=14&hidenavigation=1&theme=dark&view=preview"
style={{
    width: "100%",
    height: "500px",
    marginTop: "20px",
    border: 0,
    overflow: "hidden",
    background: "rgb(21, 21, 21)",
  }}
     title="with-ui-nextjs-react"
     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
   ></iframe>